<template>
	<div>
		<!--                                                     搜索框                                                     -->
		<div style="padding: 10px 0; border: rgb(47,144,185,0.2) solid 1px; box-shadow: 1px 1px 3px #ccc;" >
			<el-input style=" width: 15%; margin-left: 10px;" placeholder="请输入求购商品" prefix-icon="el-icon-s-goods" v-model="product">
			</el-input>
			<el-input style=" width: 15%; margin-left: 10px;" placeholder="请输入发布者" prefix-icon="el-icon-s-custom"
				v-model="unumber"></el-input>
			<el-button style="margin-left: 10px; background-color: #22a2c3; color: white;" @click="load"
				icon="el-icon-search" circle></el-button>
			<el-button class="ml-5" @click="reset" style="background-color: #e8b004; color: white;"
				icon="el-icon-refresh-left" circle></el-button>
			<el-button style="background-color: #40a070; color: white;" @click="handleAdd" icon="el-icon-plus" circle>
			</el-button>
			<el-button type="danger" round @click="delBetch" v-if="this.urole === 'ROLE_SUPERADMIN'">批量删除</el-button>
		</div>

		<!--                                                      表格                                                         -->
		<el-table :data="tableData" border style="width: 100%; margin: 10px 0 10px 0 " :header-cell-class-name="'headerBg'"
			@selection-change="handleSelectionChange" tooltip-effect="dark">
			<!--                                       多选框                                                      -->
			<el-table-column type="selection" width="45"></el-table-column>
			
			<!--                                       表单内容                                                     -->
			<el-table-column prop="product" label="求购商品" width="250"></el-table-column>
			<el-table-column prop="unumber" label="发布者" width="100"></el-table-column>
			<el-table-column prop="price" label="期望价格" width="100"></el-table-column>
			<el-table-column prop="address" label="期望交易地点" width="220"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>

			<!--                                       操作按键                                                   -->
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="warning" icon="el-icon-edit" circle @click="handleEdit(scope.row)"
						v-if=" urole === 'ROLE_SUPERADMIN' ||  scope.row.unumber === number">
					</el-button>
					<el-popconfirm style="margin-left: 15px;" confirm-button-text='确定' cancel-button-text='再想想'
						icon="el-icon-info" icon-color="red" title="确定删除此求购信息" @confirm="handleDelete(scope.row.id)">
						<el-button type="danger" icon="el-icon-delete" circle slot="reference"
							v-if="scope.row.unumber === number || urole === 'ROLE_SUPERADMIN'"></el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<!--                                               分页表                                                        -->
		<div style="padding: 10px 0; text-align: center;">
			<el-pagination :page-sizes="[6, 12, 18, 24]" :page-size="pageSize" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<!--                                         嵌套表单 新增求购商品信息                                            -->
		<el-dialog title="添加求购商品信息" :visible.sync="dialogFormVisible" width="35%">
			<el-form label-width="100px">
				<el-form-item label="求购内容">
					<el-input v-model="form.product" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="求购信息账号">
					<el-input v-model="form.unumber" disabled autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="期望价格">
					<el-input v-model="form.price" autocomplete="off" maxlength="11" minlength="8"
						style="width: 250px;">
					</el-input>
				</el-form-item>
				<el-form-item label="交易地址">
					<el-input v-model="form.address" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</div>
		</el-dialog>

		<!--                                          嵌套表单 编辑求购商品信息                                             -->
		<el-dialog title="编辑求购信息信息" :visible.sync="dialogFormVisible1" width="35%">
			<el-form label-width="100px">
				<el-form-item label="求购内容">
					<el-input v-model="form.product" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="求购信息账号">
					<el-input v-model="form.unumber" disabled autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="期望价格">
					<el-input v-model="form.price" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="交易地址">
					<el-input v-model="form.address" autocomplete="off" style="width: 250px;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="edit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Wbuy",
		data() {
			return {
				// 多选框
				multipleSelection: [],
				// 求购信息数据
				tableData: [],
				// 分页查询数据
				pageSize: 6,
				pageNum: 1,
				total: 0,
				// 搜索框数据
				product: '',
				unumber: '',
				// 隐藏表单显示
				dialogFormVisible: false,
				dialogFormVisible1: false,
				// 表单数据
				form: {},
				// 获取角色信息
				roles: [],
				// 获取登录求购信息信息 进行判断是否能执行操作
				number: '',
				urole: ''
			}
		},
		methods: {
			// 勾选求购信息
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 重置输入框
			reset() {
				this.unumber = '',
					this.product = '',
					this.load()
			},

			//批量删除弹窗 && 删除信息
			delBetch() {
				if (this.urole === "ROLE_USER") {
					this.$message.error("普通求购信息没有批量删除权限，请联系管理员!");
				} else {
					if (this.multipleSelection != '') {
						this.$confirm('此操作将永久删除这些求购信息, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true
						}).then(() => {
							this.delChose()
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					} else {
						this.$message.error("未选择需要删除求购信息!");
					}
				}
			},
			delChose() {
				let ids = this.multipleSelection.map(v => v.id) // 将对象数组变为ID数组
				this.request.post("/wbuy/del/batch", ids).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},


			// 新增求购信息表框显示  &&    存储信息数据
			handleAdd() {
				this.dialogFormVisible = true
				this.form = {
					unumber: this.number
				}
			},
			save() {
				this.request.post("/wbuy", this.form).then(res => {
					if (res.code != 500) {
						console.log(res);
						this.dialogFormVisible = false
						this.load()
						this.$message.success(res.message)
					} else {
						this.dialogFormVisible = false
						this.$message.error(res.message)
					}
				})
			},

			// 编辑数据表单 && 编辑数据  && 删除数据
			handleEdit(row) {
				this.form = JSON.parse(JSON.stringify(row))
				this.dialogFormVisible1 = true
				this.load()
			},
			edit() {
				this.request.put("/wbuy", this.form).then(res => {
					if (res.code != 500) {
						console.log(res);
						this.dialogFormVisible1 = false
						this.$message.success(res.message)
						this.load()
					} else {
						this.dialogFormVisible1 = false
						this.$message.error(res.message)
					}
				})
			},
			handleDelete(id) {
				this.request.delete("/wbuy/" + id).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.load()
					} else {
						this.$message.success(res.message)
					}
				})
			},

			// 封装分页查询请求 && 进行分页查询
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},
			load() {
				this.request.get('/wbuy/page', {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						product: this.product,
						unumber: this.unumber
					}
				}).then(res => {
					console.log(res);
					this.tableData = res.obj.records
					this.total = res.obj.total
				})
			},
			// 获取存储于游览器的角色信息
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.number = username.number;
				this.urole = username.role;
			},
		},
		created() {
			// 请求分页查询
			this.load();
			// 获取角色信息
			this.getUser()
		},
	}
</script>

<style>
	.headerBg {
		background: #a4cab6 !important;
		color: #000;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
